import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

import { getfenlei, getlist } from '@/api/http';

import { FenleiCss } from './style';

@withRouter
class Fenlei extends Component {
    state = {
        list: [],
        cla: 1,
        splist: []
    }
    async componentDidMount() {
        let fenl = await getfenlei()
        let list = await getlist(1)
        this.setState({
            list: fenl.data.data,
            cla: fenl.data.data[0].id,
            splist: list.data.data.list
        })
    }
    gaib = async (id) => {
        let list = await getlist(id)
        this.setState({
            cla: id,
            splist: list.data.data.list
        })
    }
    xiangq(id) {
        // console.log(id,this.props);
        this.props.history.push('/xiangqing/'+id)
    }
    render() {
        return (
            <FenleiCss>
                <div className='top_sousu'>
                    <div>
                        <span>🔍 刮胡刀</span>
                    </div>
                </div>

                <div className='list'>
                    <ul className='list_lef'>
                        {
                            this.state.list.length !== 0
                                ?
                                this.state.list.map(r => (
                                    <li key={r.id} onClick={() => this.gaib(r.id)}>
                                        <span className={this.state.cla === r.id ? 'aa' : ''}>{r.name}</span>
                                    </li>
                                ))
                                :
                                null
                        }
                    </ul>
                    <ul className='list_rig'>
                        {
                            this.state.splist.length !== 0
                                ?
                                this.state.splist.map(r => (
                                    <li key={r.product.id} onClick={() => this.xiangq(r.product.productSn)}>
                                        <div className='lef_pic'>
                                            <img src={r.product.picWap} alt="" />
                                        </div>
                                        <div className='rig_info'>
                                            <p className='p1'>{r.product.name}</p>
                                            <p className='p2'>{r.product.description}</p>
                                            <div className='p3'>
                                                <div>
                                                    <span className='s1'>￥{r.product.promotionPrice}</span>
                                                    <span className='s2'>￥{r.product.originalPrice}</span>
                                                </div>
                                                <span onClick={()=> alert('别动')}>+</span>
                                            </div>
                                        </div>
                                    </li>
                                ))
                                :
                                null
                        }
                    </ul>
                </div>
            </FenleiCss>
        );
    }
}

export default Fenlei;
